<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link type="text/css" rel="stylesheet" href="login/css/style.css"/>
    <script type="text/javascript" src="login/js/script.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <script>
        //刷新验证码
        function flushCode() {
            $.ajax({
                type: 'get',
                url: "login/code",
                async: false,//同步/异步
                contentType: "application/x-www-form-urlencoded; charset=gbk",
                dataType: 'json', //返回 JSON 数据
                success: function (data, status) {
                    if (data.code == "200") {
                        var result = data.data;
                        document.getElementById("codeImg").src = result.img
                        document.getElementById("uuid").value = result.uuid;
                    } else {
                        alert('接口调用失败！');
                    }
                },
                error: function (data, status, e) {
                    alert('接口调用错误！');
                }
            });
        }

        $(function () {
            flushCode();
        })


        function login() {
            var username = document.getElementById("userName").value;
            var password = document.getElementById("password").value;
            var code = document.getElementById("code").value;
            var uuid = document.getElementById("uuid").value;

            var opt = {"username": username, "password": password, "code": code, "uuid": uuid};
            $.ajax({
                type: 'post',
                url: "login/login",
                data: JSON.stringify(opt),
                async: false,//同步/异步
                contentType: "application/json",
                dataType: 'json', //返回 JSON 数据
                success: function (data, status) {
                    if (data.code == "200") {
                        console.log(data.data);
                        sessionStorage.setItem("Authorization", data.data);
                        var data = sessionStorage.getItem("Authorization");
                        //sessionStorage.setItem("key","value");    //保存数据到sessionStorage
                        //var data = sessionStorage.getItem("key");   //获取数据
                        //sessionStorage.removeItem("key");                //删除数据
                        //sessionStorage.clear();                                  //删除保存的所有数据
                        console.log(data);
                        window.location.href = "index.html"
                    } else {
                        alert(data.message);
                        flushCode();
                    }
                },
                error: function (data, status, e) {
                    alert('接口调用错误！');
                }
            });
        }
    </script>
</head>
<body>
<div id="loginDiv">
    <h1 id="loginText">登录</h1>
    <div id="formDiv">
        账&nbsp;&nbsp;&nbsp;&nbsp;号:&nbsp;&nbsp;&nbsp;<input id="userName" type="text"> <br> <br>
        密&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;&nbsp;<input id="password" type="password"> <br>
        验证码:&nbsp;&nbsp;&nbsp;<input id="code" type="text"> &nbsp;&nbsp;&nbsp; <img id="codeImg" src="" alt="">
        <input id="uuid" type="hidden">
        <br> <br> <br>
        <input id="loginButton" onclick="login()" value="登 录" type="button">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input id="" onclick="flushCode()" value="刷新验证码" type="button">
    </div>
</div>
</body>
</html>
